<template>
  <div class="wrap">
    <vxe-grid
      ref="xGrid"
      :formConfig="formConfig"
      :columns="tableColumn"
      :pager-config="pagerConfig"
      :toolbar-config="tableToolbar"
      :proxy-config="proxyConfig"
      border
      resizable
      :height="height"
      class="grid"
      @keydown="onEnter"
      @form-submit="findList"
      @form-reset="reset"
      @page-change="onPageChange"
      @form-submit-invalid="onInvalid"
      @toolbar-button-click="onCustomButton"
    >
      <!--自定义右侧按钮插槽 toolbar tools 插槽-->
      <template v-if="toolbarToolsRight" #toolbar_tools>
        <vxe-input placeholder="搜索"></vxe-input>
      </template>

      <!--使用 top 插槽-->
      <template v-if="showCustomizedTop" #top>
        <div class="alert-message">
          <i class="fa fa-exclamation-circle alert-message-icon"></i>
          <span class="alert-message-content">
            <div>自定义模板</div>
          </span>
        </div>
      </template>

      <!--表格内容渲染自定义插槽 每个业务模块相同的渲染逻辑才在次处理，否则用formatter start-->

      <template #status="{ row }">
        <span v-if="row.status === 'published'">已发布</span>
        <span v-else>{{ row.status }}</span>
      </template>

      <!--表格内容渲染自定义插槽 end-->

      <!--使用 bottom 插槽-->
      <template v-if="showCustomizedBottom" #bottom>
        <div class="alert-message">
          <i class="fa fa-exclamation-circle alert-message-icon"></i>
          <span class="alert-message-content">
            <div>自定义html</div>
          </span>
        </div>
      </template>
    </vxe-grid>
  </div>
</template>
<script>
export default {
  name: 'RpTable',
  props: {
    proxyQuery: {
      // 重写query
      type: Function,
      default: function () {},
      require: true
    },
    formConfig: {
      // 表格的搜索条件(https://xuliangzhan_admin.gitee.io/vxe-table/v3/#/grid/api)
      type: Object,
      default: () => {},
      require: true
    },
    tableColumn: {
      // 表格的列(https://x-extends.github.io/vxe-table/#/column/api)
      type: Array,
      default: () => [],
      require: true
    },
    tableToolbar: {
      // 表格左侧按钮
      type: Object,
      default: () => {},
      require: false
    },
    showCustomizedTop: {
      // 是否显示搜索框和表格之间的其他内容
      type: Boolean,
      default: false,
      require: false
    },
    showCustomizedBottom: {
      // 是否显示表格和分页之间的其他内容
      type: Boolean,
      default: false,
      require: false
    },
    toolbarToolsRight: {
      // 是否在表格又上测自定义按钮等内容
      type: Boolean,
      default: false,
      require: false
    }
  },
  data() {
    return {
      formData: {
        name: '',
        nickname: '',
        sex: ''
      },
      pagerConfig: {
        // 分页配置
        // layouts: []
        // autoHidden: true,
        total: 0
      },
      proxyConfig: {
        // 与表格data属性互斥
        form: true,
        props: {
          result: 'data', // 响应结果中获取数据列表的属性
          total: 'total' // 响应结果中获取分页的属性
        },
        ajax: {
          query: this.proxyQuery
        }
      }
    }
  },
  computed: {
    height() {
      return document.body.clientHeight - 100
    }
  },
  methods: {
    findList({ data }) {
      console.log('表单提交data', data)
    },
    reset() {
      console.log('reset')
    },
    onCustomButton({ code }) {
      this.$emit('customButton', code)
    },
    onEnter({ $event }) {
      if ($event.keyCode === 13) {
        console.log(777)
      }
    },
    onPageChange() {
      console.log('分页')
    },
    onInvalid() {
      console.log('条件不通过')
    }
  }
}
</script>
<style scoped>
.wrap {
  padding: 10px;
  background-color: #fff;
}
.grid .alert-message {
  height: 40px;
  display: flex;
  align-items: center;
  margin: 10px 0;
  border-radius: 4px;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}
.grid .alert-message-icon {
  width: 30px;
  text-align: center;
  color: #409eff;
  margin-right: 8px;
}
.grid .alert-message-content {
  flex-grow: 1;
  padding-right: 20px;
}
.grid .page-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.grid .select-count {
  display: inline-block;
  vertical-align: middle;
}
.grid .my-input {
  width: 100%;
}
.grid .first-col {
  position: relative;
  height: 20px;
}
.grid .first-col:before {
  content: '';
  position: absolute;
  left: -14px;
  top: 10px;
  width: 204px;
  height: 1px;
  transform: rotate(13deg);
  background-color: #e8eaec;
}
</style>
